<template>
	<div>
		<div class="scroll-warrp" ref="scorll">
			<ul>
				<li v-for="item in arrayList">{{item}}</li>
				<li class="1px-top" v-if="!isLoading">上拉加载更多</li>
				<loading v-if="isLoading"></loading>
			</ul>
			
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	import Loading from './loading/loading'
	export default{
		data(){
			return{
				arrayList:[],
				isLoading:true
			}
		},
		mounted(){
			this.initData()			
		},
		methods:{
			initData(){
				
				setTimeout(() => {
					for(let i = 0;i<30;i++){
						this.arrayList.push(`这是第${i}条数据`)
					}
					this.isLoading = false
					this.initScroll()
					if(this.scroll){
						this.scroll.finishPullUp()
						this.scroll.refresh()
					}
				},5000)
			},
			initScroll(){
				if(this.scroll){
					return
				}
				this.scroll = new BScroll(this.$refs.scorll,{
					probeType:3,
					click:true,
					pullUpLoad: {
					  threshold: -50
					}
				}),
				this.scroll.on('pullingUp',() => {
					this.isLoading = true
					console.log('触发了')
					this.initData()					
				})
			}
		},
		components:{
			Loading
		}
	}
</script>

<style lang="stylus">
	.scroll-warrp
		overflow:hidden
		position:absolute
		left:0
		right:0
		bottom:0
		top:0
		li
			line-height:.6rem
			text-align:center
</style>